<!DOCTYPE html>
<html>
<head>
    <title>用戶详情</title>
    <#include "/header.html">
    <style type="text/css">
        .app{padding: 10px;}
        .app .tabs{border-bottom: solid 1px #559cf5}
        .app .tabs ul, .app .tabs li{list-style: none; padding: 0px; margin: 0px;}
        .app .tabs li{float: left; padding: 10px 15px; border-bottom: solid 3px #fff; cursor: pointer;}
        .app .tabs li.active{border-bottom: solid 3px #559cf5;color: #559cf5}
        .app .tab-content{padding: 10px;}
        #app table td{border:none}
    </style>
</head>
<body>

<div id="app" class="app">
    <div>
        <div class="table-responsive" >
            <table class="table table-bordered" style="border:none;">
                <tbody>
                <tr>
                    <td rowspan="2" style="width: 140px;"><img style="width: 72px;height: 72px;" :src="userinfo.avanta"/></td>
                    <td>用户id ：{{userinfo.userId}}</td>
                    <td>用户名 ：{{userinfo.nickname}}</td>
                    <td>手机号 ：{{userinfo.mobile}}</td>
                    <td>上次登录时间 ：{{userinfo.lastLogin|timestampStr}}</td>
                </tr>
                <tr>
                    <td>粉丝数 ：{{userinfo.fansCount}}</td>
                    <td>关注数 ：{{userinfo.attentCount}}</td>
                    <td>可提余额 ：{{userinfo.balance}}</td>
                    <td>金币数 ：{{userinfo.coin}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="tabs">
        <ul>
            <li :class="{'active':value.text == tabs.active}" v-for="(value,key) in tabs.list" @click="clickItem(value)">{{value.text}}</li>
        </ul>
        <div class="clearfix"></div>
    </div>
    <div class="tab-content padding10">
        <div v-show = "url == ''">
            <div class="table-responsive">
                <table class="table table-bordered" style="border:none;width: 50%;">
                    <tbody>
                    <tr>
                        <td >性别 ：{{userinfo.gender|gender2text}}</td>
                        <td >生日 ：{{userinfo.birthday}}</td>
                    </tr>
                    <tr>
                        <td>昵称 ：{{userinfo.nickname}}</td>
                        <td>手机号 ：{{userinfo.mobile}}</td>
                    </tr>
                    <tr>
                        <td>个人签名 ：{{userinfo.ibo}}</td>
                        <td>星座 ：{{userinfo.constel}}</td>
                    </tr>
                    <tr>
                        <td>学校 ：{{userinfo.school}}</td>
                        <td>形象照 ：<img style="width: 72px;height: 72px;" :src="userinfo.sense"/></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <iframe v-show="url!=''" :src="url" width="100%" frameborder="0" height="100%"></iframe>
    </div>
</div>
<script>

    $(function () {
        var tabs = [
            {
                "text": "用户资料",
                "url": ""
            },
            {
                "text": "订单记录",
                "url": "userorder.html?"
            },
            {
                "text": "收支记录",
                "url": "userpayment.html?"
            },
            {
                "text": "打赏记录",
                "url": "usergifthistory.html?"
            },
            {
                "text": "提现记录",
                "url": "userwithdrawhistory.html?"
            },
            {
                "text": "匹配记录",
                "url": "usermatchinghistory.html?"
            },
            {
                "text": "银行卡列表",
                "url": "userbank.html?"
            },
            {
                "text": "我的动态",
                "url": "user_posts.html?"
            },
            {
                "text": "关注我的",
                "url": "my_attent.html?type=attent&object_name=user&selectType=1&"
            },
            {
                "text": "我关注的",
                "url": "my_attent.html?type=attent&object_name=user&selectType=0&"
            }
        ];

        var resize = function () {
            $('iframe').each(function () {
                $(this).css({
                    height: $(window).height() - 60
                })
            })
        }
        $(window).on('resize', resize)

        var vm = new Vue({
            el: '#app',
            data: function () {
                return {
                    uid: "${RequestParameters['uid']}",
                    url: '',
                    tabs: {
                        active: '用户资料',
                        list: tabs
                    },
                    userinfo:{}
                }
            },
            created:function(){
                apiget(str_format('dataview/viewuserfullinfo/info/{0}',this.uid),function (res) {
                    vm.userinfo = res.data;
                    console.log(res);
                })
            },
            methods: {
                clickItem: function (tab) {
                    this.tabs.active = tab.text;
                    if (tab.url) {
                        this.url = tab.url + 'uid=' + this.uid;
                    }
                    else{
                        this.url = '';
                    }

                    setTimeout(function () {
                        vm.$nextTick(function () {
                            resize();
                        })
                    })
                }
            }
        })
    })
</script>
<!--<script src="${request.contextPath}/statics/js/modules/user/user.js?_${.now?long}"></script>-->
</body>
</html>